![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@liripeng/vue-audio-player
Advanced tools
Simple and practical Vue audio player component for PC mobile terminal(简单实用的 PC 移动端的 Vue 音频播放器组件)
Vue2
and Vue3
are supportednpm i -S @liripeng/vue-audio-player
// global import
import AudioPlayer from '@liripeng/vue-audio-player'
Vue.use(AudioPlayer)
or
// part import
import AudioPlayer from '@liripeng/vue-audio-player'
components: {
AudioPlayer
}
<template>
<div>
<div class="name">
{{ currentAudioName || audioList[0].title }}
</div>
<audio-player
ref="audioPlayer"
:audio-list="audioList"
:before-play="handleBeforePlay"
:show-play-loading="false"
>
</audio-player>
</div>
</template>
<script>
export default {
data() {
return {
currentAudioName: '',
audioList: [
{
src: 'http://music.163.com/song/media/outer/url?id=317151.mp3', // Required
title: 'Audio Title 1', // Optional,Phone lock screen music player display
artist: 'Artist Name 1', // Optional,Phone lock screen music player display
album: 'Album Name 1', // Optional,Phone lock screen music player display
artwork: [
{
src: 'https://upload.jianshu.io/users/upload_avatars/1696356/c358e43854eb?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
sizes: '512x512',
type: 'image/jpg',
},
], // Optional,Phone lock screen music player display
},
{
src: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3', // Required
title: 'Audio Title 2', // Optional,Phone lock screen music player display
},
],
}
},
methods: {
// Use this function if you want to do something before you start playing
handleBeforePlay(next) {
this.currentAudioName =
this.audioList[this.$refs.audioPlayer.currentPlayIndex].title
next() // Start play
},
},
}
</script>
Prop | Explain | Type | Default |
---|---|---|---|
audio-list | Audio playlist | Array<Object> | - |
playback-rates | Playrate setting list | Array<Number> | [0.5, 1, 1.5, 2] |
show-play-button | Whether to display the play button | Boolean | true |
show-prev-button | Whether to display the previous button | Boolean | true |
show-next-button | Whether to display the next button | Boolean | true |
show-volume-button | Whether to display the volume button | Boolean | true |
show-progress-bar | Whether to display a progress bar | Boolean | true |
show-playback-rate | Whether to display the play rate button | Boolean | true |
show-play-loading | Whether to display loading on playback | Boolean | true |
isLoop | Whether the list plays in a loop | Boolean | true |
disabled-progress-drag | Disable progress bar drag functionality | Boolean | false |
disabled-progress-click | Disable progress bar clickable functionality | Boolean | false |
progress-interval | Progress update interval | Number | 1000 |
theme-color | Theme color | String | #e35924 |
before-play | The callback function before the play starts The play starts after next() is called | (next)=>void | - |
before-prev | Play the previous callback function After calling next() , the previous song starts playing | (next)=>void | - |
before-next | Play the callback function before the next song After calling next() , the next song starts playing | (next)=>void | - |
The rest is consistent with native audio |
Event | Explain | Callback |
---|---|---|
play | Triggers when the play starts | - |
pause | Trigger after play pause | - |
play-prev | Triggers after playing the previous song | - |
play-next | Triggers after playing the next song | - |
play-error | Triggered after play error,The parameters are the same as those of the native 'play' method | data |
playing | The play fires every progressInterval second | - |
timeupdate | Triggered when the current play position is sent to change | event |
loadedmetadata | The run script is triggered when the duration of the media element and other media have loaded data | event |
ended | Trigger after audio playback | event |
progress-start | Trigger before moving the progress bar | event |
progress-move | Triggered when moving the progress bar | event |
progress-end | Triggered after moving the progress bar | event |
progress-click | Click the progress bar to trigger | event |
Name | Explain |
---|---|
play-prev | Play prev button,The replaceable button icon function remains unchanged |
play-start | Play start button,The replaceable button icon function remains unchanged |
play-pause | Play pause button,The replaceable button icon function remains unchanged |
play-next | Play next button,The replaceable button icon function remains unchanged |
Variable | Explain | Default |
---|---|---|
currentPlayIndex | The audio index currently playing | 0 |
isPlaying | Whether the audio is playing | false |
duration | Audio duration | '' |
currentTime | Current playback time of audio | '' |
playbackRate | Current playback rate of audio | 1 |
Call with ref
,see the components for more data
Method | Explain | Callback |
---|---|---|
play | Start | - |
pause | Pause | - |
playPrev | Previous | - |
playNext | Next | - |
Call with ref
,see the components for more methods
Improvement:Mouse-over shows hand icon despite :disabled-progress-drag and :disabled-progress-click
Fix:Since upgrading to 1.5.3: Sourcemap pointing to missing source files
showPlayLoading
propVue2
and Vue3
work fineCSS
fileplay-prev
、play-start
、play-pause
and play-next
play-error
eventimport '@liripeng/vue-audio-player/lib/style.css'
disabled-progress-drag
propdisabled-progress-click
propprogress-start
eventprogress-move
eventprogress-end
eventprogress-click
eventThe browser of some mobile phones is 0 after loading due to asynchronous problems
Realize custom play position or continue to play?
Example:
this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds
53
and above51
and aboveMIT
😘If you think it's helpful, click a 'Star',Any problem found in the process of use can be raised Issue
, also very welcome to mention PR
.
FAQs
Simple and practical Vue audio player component for PC mobile terminal(简单实用的 PC 移动端的 Vue 音频播放器组件)
The npm package @liripeng/vue-audio-player receives a total of 2,843 weekly downloads. As such, @liripeng/vue-audio-player popularity was classified as popular.
We found that @liripeng/vue-audio-player demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.